<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #clock-box {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 500px;
      transform: translate(-50%, -50%);
    }

    .out {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(greenyellow, orange);
      border-radius: 50%;
    }

    .in {
      position: absolute;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background-color: #ffffff;
      z-index: 1;
      box-shadow: 0 18px 24px #ccc inset;
    }

    .num {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 82%;
      font-size: 30px;
      font-weight: bold;
      color: #333;
      z-index: 1;
    }

    .num:after {
      content: '';
      display: block;
      clear: both;
    }

    .num1 {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .num2 {
      transform: translate(-50%, -50%) rotate(60deg);
    }

    .num3 {
      transform: translate(-50%, -50%) rotate(30deg);
    }

    .num4 {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .num5 {
      transform: translate(-50%, -50%) rotate(-30deg);
    }

    .num6 {
      transform: translate(-50%, -50%) rotate(-60deg);
    }

    .text1 {
      float: left;
    }

    .text2 {
      float: right;
    }

    .num1 .text1,
    .num1 .text2 {
      transform: rotate(-90deg);
    }

    .num2 .text1,
    .num2 .text2 {
      transform: rotate(-60deg);
    }

    .num3 .text1,
    .num3 .text2 {
      transform: rotate(-30deg);
    }

    .num4 .text1,
    .num4 .text2 {
      transform: rotate(0deg);
    }

    .num5 .text1,
    .num5 .text2 {
      transform: rotate(30deg);
    }

    .num6 .text1,
    .num6 .text2 {
      transform: rotate(60deg);
    }

    .hh {
      position: absolute;
      left: 50%;
      top: 24%;
      height: 26%;
      width: 8px;
      background-color: rebeccapurple;
      transform: translate(-50%, 0);
      z-index: 1;
      transform-origin: bottom center;
    }

    .mm {
      position: absolute;
      left: 50%;
      top: 22%;
      height: 28%;
      width: 6px;
      background-color: yellowgreen;
      transform: translate(-50%, 0);
      z-index: 2;
      transform-origin: bottom center;
    }

    .ss {
      position: absolute;
      top: 18%;
      left: 50%;
      height: 32%;
      width: 4px;
      background-color: royalblue;
      transform: translate(-50%, 0);
      z-index: 3;
      transform-origin: bottom center;
    }

    .ss:after {
      position: absolute;
      bottom: -25px;
      content: '';
      display: block;
      height: 30px;
      width: 4px;
      background-color: royalblue;
    }

    .hh:after {
      position: absolute;
      bottom: -18px;
      content: '';
      display: block;
      height: 30px;
      width: 8px;
      background-color: rebeccapurple;
    }

    .mm:after {
      position: absolute;
      bottom: -12px;
      content: '';
      display: block;
      height: 30px;
      width: 6px;
      background-color: yellowgreen;
    }

    .dot-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      background-color: #ffffff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
    }

    .dot-default {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 88%;
      transform: translate(-50%, -50%);
      z-index: 6;
    }

    .dot-default:after {
      content: '';
      display: block;
      clear: both;
    }

    .dot1 {
      float: left;
    }

    .dot2 {
      float: right;
    }

    .dot1, .dot2 {
      width: 6px;
      height: 6px;
      background-color: #333333;
      border-radius: 50%;
    }
    .red .dot1, .red .dot2{
      width: 10px;
      height: 10px;
      background-color: red;
    }
  </style>
</head>
<body>
<div id="clock-box">
  <div class="out"></div>
  <div class="in"></div>
  <div class="hh"></div>
  <div class="mm"></div>
  <div class="ss"></div>
  <div class="dot-center"></div>
  <div class="num num1">
    <span class="text1">12</span>
    <span class="text2">6</span>
  </div>
  <div class="num num2">
    <span class="text1">11</span>
    <span class="text2">5</span>
  </div>
  <div class="num num3">
    <span class="text1">10</span>
    <span class="text2">4</span>
  </div>
  <div class="num num4">
    <span class="text1">9</span>
    <span class="text2">3</span>
  </div>
  <div class="num num5">
    <span class="text1">8</span>
    <span class="text2">2</span>
  </div>
  <div class="num num6">
    <span class="text1">7</span>
    <span class="text2">1</span>
  </div>
  <div id="dot-container"></div>
</div>
</body>
<script>
  const dotContainer = document.getElementById('dot-container')
  const hh = document.getElementsByClassName('hh')[0]
  const mm = document.getElementsByClassName('mm')[0]
  const ss = document.getElementsByClassName('ss')[0]
  function run () {
    const date = new Date()
    const s = date.getSeconds()
    const m = date.getMinutes()
    const h = date.getHours()
    ss.style.transform = `translate(-50%, 0) rotate(${s * 6}deg)`
    mm.style.transform = `translate(-50%, 0) rotate(${(m+s/60)*6}deg)`
    hh.style.transform = `translate(-50%, 0) rotate(${(h+m/60+s/3600)*30}deg)`
  }
  run()
  setInterval(() => {
    run()
  }, 1000)
  let str = ''
  for (let i = 0; i < 60; i++) {
    str += `
      <div
        class="${i%6===0?'dot-default red':'dot-default'}"
        style="transform: translate(-50%, -50%) rotate(${i*6}deg)">
        <span class="dot1"></span><span class="dot2"></span>
    </div>
    `
  }
  dotContainer.innerHTML = str
</script>
</html>
